
Ext.define('MyDesktop.NewProjectEntryWindow', {
    extend: 'Ext.util.Observable',

    constructor : function() {
        var config = arguments[0];
        Ext.apply(this, config);

        this.addEvents({
            entryAdded : true
        });

        // Copy configured listeners into *this* object so that the base class's
        // constructor will add them.
        this.listeners = config.listeners;

        MyDesktop.NewProjectEntryWindow.superclass.constructor.call(this);
    },

    createWindow : function(scenario, metaPageFilter, paracol) {

        var _this = this;

        function getSelected(selModel) {
            var selArr = selModel.getSelection();
            if (selArr && selArr.length == 1) {
                return selArr[0];
            }
            return null;
        }

        function fireEntryAdded(metaPage, pageName, fullPageName, preconfigurePage) {
            _this.fireEvent("entryAdded", {
                metaPage: metaPage,
                pageName: pageName,
                fullPageName: fullPageName,
                preconfigurePage: preconfigurePage
            });
        }

        var desktop = this.app.desktop;
        var contextEntryId = this.contextEntryId;

        // create the data store
        var store = new Ext.data.ArrayStore({
            fields: [
                {name: 'name'},
                {name: 'description'}
            ]
        });

        // create the Grid
        var grid = new Ext.grid.GridPanel({
            id: 'card-0',
            store: store,
            columns: [
                {
                    id       :'name',
                    header   : 'Name',
                    width    : 160,
                    sortable : true,
                    dataIndex: 'name'
                },
                {
                    header   : 'Description',
                    width    : 250,
                    sortable : false,
                    dataIndex: 'description'
                }
            ],
            stripeRows: true,
            //autoExpandColumn: 'description',
            height: 350,
            width: 600,
            title: 'Meta Pages'
        });

        var pageNamePanel = new Ext.FormPanel({
            id: 'card-1',
            hidden: true,
            labelWidth: 100, // label settings here cascade unless overridden
            frame:true,
            defaultType: 'textfield',
            style: 'margin-bottom: 0px',
            labelPad: 20,
            layoutConfig: {
                labelSeparator: ''
            },
            items: [
                new Ext.form.Label({
                    id: "selected-meta-page-name-label",
                    text: ""
                }),
                {
                    id: "page-name-field",
                    fieldLabel: 'Page Series Name',
                    name: 'pageName',
                    allowBlank:false
                }
            ]

        });

        pageNamePanel.on("activate", function() {
            Ext.getCmp("page-name-field").focus();
        });

        var cardNav = function(incr) {
            var l = Ext.getCmp('NewProjectEntryWindow').getLayout();
            var i = l.activeItem.id.split('card-')[1];
            var next = parseInt(i, 10) + incr;

            if (next == 1) {
                var sel = getSelected(grid.getSelectionModel());
                if (!sel) {
                    alert("No selection made");
                    return;
                }
                var selectedType = sel.data.name;
                Ext.getCmp("selected-meta-page-name-label").setText("Selected page type: " + selectedType);
            }

            l.setActiveItem(next);
            Ext.getCmp('card-prev').setDisabled(next == 0);
            Ext.getCmp('card-next').setDisabled(next == 1);
            Ext.getCmp('card-configure').setDisabled(next != 1);
            Ext.getCmp('card-finish').setDisabled(next != 1);
        };

        function createBtnHandler(paramBtnHandler, inc) {
            return function() {
                return paramBtnHandler(inc);
            }
        }

        grid.on("itemdblclick", function(ev) {
            cardNav(1);
        });

        var finishBtnHandler = function(preconfigure) {
            var selected = getSelected(grid.getSelectionModel());
            var selectedMetaPage = selected.data.name;
            var pageName = Ext.getCmp('page-name-field').getValue();
            var fullPageName;
            if (contextEntryId) {
                fullPageName = contextEntryId + ',' + pageName;
            } else {
                fullPageName = pageName;
            }

            paracol.addProjectEntry(selectedMetaPage, fullPageName, scenario, [] /*todo*/, {
                onProjectEntryAdded: function() {
                    fireEntryAdded(selectedMetaPage, pageName, fullPageName, preconfigure);
                    mainPanel.close();
                }
            });
        };

        var mainPanel = desktop.createWindow({
            id: "NewProjectEntryWindow",
            shim:false,
            animCollapse:false,
            constrainHeader:true,

            layout: 'card',
            activeItem: 0, // index or id

            width:500,
            height:500,
            closeAction:'close',
            plain: true,
            modal: true,

            title: 'New Project Entry',

            bbar: ['->', {
                id: 'card-prev',
                text: '&laquo; Previous',
                handler: createBtnHandler(cardNav, -1),
                disabled: true
            },{
                id: 'card-next',
                text: 'Next &raquo;',
                handler: createBtnHandler(cardNav, 1)
            },{
                id: 'card-configure',
                text: 'Configure',
                disabled: true,
                handler: createBtnHandler(finishBtnHandler, true)
            },{
                id: 'card-finish',
                text: 'Finish',
                disabled: true,
                handler: createBtnHandler(finishBtnHandler, false)
            }],

            items:[
                grid,
                pageNamePanel
            ],

            onMetaProjectEntries: function(msg) {
                // manually load local data
                var data = msg.entries;
                store.loadData(data);
            }

        });

        paracol.getMetaProjectEntries(mainPanel);

        mainPanel.show();

        return mainPanel;

    }
});